<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="cargo">
    <meta name="keywords" content="ddd,cargo">
    <meta name="author" content="Sayi">
    <title>Cargo Admin</title>
    <link rel="stylesheet" href="css/cargo.css" />
    <script src="js/cargo.js"></script>
</head>

<body>
    <header>
    </header>
    <div class="article">
        <div id="toolbox">
            <div class="header">
                Cargo Management System
            </div>
            <input id="search" type="search" placeholder="输入发件人搜索" onchange="search()" />
            <button class="tool" onclick="Javascript:location.href='booking.html'"
                title="switch horizontal or vertial chart">
                预订货物
            </button>
        </div>
        <div id="main">
            <!-- <div id="cargo">
                <div>CARGO-NO-16193</div>
                <div>1590000</div>
                <div>香蕉、苹果和梨子</div>
                <div>杭州 to 北京</div>
                <div>
                    <button class="button_small" onclick="Javascript:location.href='modifyphone.html?cargoId=1678'">
                        修改发送人
                    </button>
                    <button class="button_small" onclick="Javascript:location.href='modifydelivery.html?cargoId=1678'">
                        修改目的地
                    </button>
                    <button class="button_small" style="background-color: bisque"
                        onclick="Javascript:location.href='event.html?cargoId=1678'">
                        添加处理事件
                    </button>
                    <button class="button_small" style="background-color: bisque"
                        onclick="Javascript:location.href='cargo.html?cargoId=1678'">
                        追踪单号
                    </button>
                </div>
            </div> -->

        </div>
    </div>

    <script type="text/javascript">
        function getCargos(phone) {
            var xmlhttp = new XMLHttpRequest();
            var url = "/cargo" + (phone ? ("?phone=" + phone) : "");
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
            xmlhttp.onreadystatechange = function () {
                // && xmlhttp.status == 200
                if (xmlhttp.readyState == 4) {
                    var text = xmlhttp.responseText;
                    // alert(text);
                    var mainElement = document.getElementById("main");
                    var cargos = JSON.parse(text);
                    mainElement.innerHTML = "";
                    cargos.forEach(element => {
                        console.log(element);
                        mainElement.innerHTML = mainElement.innerHTML + '<div id="cargo">' +
                            '<div style="width:15%">' + element.id + '</div>' +
                            '<div style="width:10%">' + element.senderPhone + '</div>' +
                            '<div style="width:15%">' + element.description + '</div>' +
                            '<div style="width:14%">' + element.originLocationName + ' to ' + element.destinationLocationName + '</div>' +
                            '<div>' +
                            '   <button class="button_small" onclick="Javascript:location.href=\'modifyphone.html?cargoId=' + element.id + '\'">' +
                            '修改发送人' +
                            '</button>' +
                            '<button class="button_small" onclick="Javascript:location.href=\'modifydelivery.html?cargoId=' + element.id + '\'">' +
                            '修改目的地' +
                            '</button>' +
                            '<button class="button_small" style="background-color: bisque" ' +
                            'onclick="Javascript:location.href=\'event.html?cargoId=' + element.id + '\'">' +
                            '添加处理事件' +
                            '</button>' +
                            '<button class="button_small" style="background-color: bisque"' +
                            'onclick="Javascript:location.href=\'cargo.html?cargoId=' + element.id + '\'">' +
                            '追踪单号' +
                            '</button>' +
                            '</div>' +
                            '</div>';
                    });
                }
            }
        }

        function search() {
            var value = document.getElementById("search").value;
            if (value && value.trim()) {
                console.log(value);
            }
            getCargos(value ? value.trim() : "");
        }
        getCargos("");
    </script>
</body>
</html>